{% extends 'base.html' %}
{% block title %}
    用户注册
{% endblock %}
{% block styles %}
    {{ super() }}
    <style>
        #container {
            {#padding-top: 30px;#}
            {#width: 600px;#}
            {#height: 600px;#}
            {#margin: 0 auto;#}
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        #container h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        #container form {

            margin: 0 auto;
        }
    </style>
{% endblock %}

{% block content %}
    <div id="container"  class=" col-lg-3 col-lg-offset-4 col-md-5 col-md-offset-4 col-sm-5 col-sm-offset-4 col-xs-8 col-xs-offset-2">
        <h1>用户注册</h1>
        <form class="form-horizontal" method="post" action="{{ url_for('user.register') }}">
            <div class="form-group">
                <label for="inputUsername" class="col-lg-4 control-label">用户名</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" id="inputUsername" placeholder="此处输入用户名" name="username">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-lg-4  control-label">密码</label>
                <div class="col-lg-8">
                    <input type="password" class="form-control" id="inputPassword" placeholder="此处输入密码"
                           name="password">
                </div>
            </div>
            <div class="form-group">
                <label for="inputConfirm" class="col-lg-4 control-label">确认密码</label>
                <div class="col-lg-8">
                    <input type="password" class="form-control" id="inputConfirm" placeholder="确认输入的密码"
                           name="confirmpassword">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPhone" class="col-lg-4 control-label">手机号码</label>
                <div class="col-lg-8">
                    <input type="text" class="form-control" id="inputPhone" placeholder="手机号（可选）" name="phone">
                    <span> </span>
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail" class="col-lg-4 control-label">邮箱</label>
                <div class="col-lg-8">
                    <input type="email" class="form-control" id="inputEmail" placeholder="邮箱号（可选）" name="email">
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-12 col-lg-offset-3 col-lg-12  col-sm-offset-2 col-sm-12  col-sx-offset-2 col-xs-12">
                    <button type="submit" class="btn btn-primary col-md-3 col-xs-offset-1" >注&nbsp;&nbsp;册
                    </button>
                    <button type="reset" class="btn btn-primary col-md-3 col-md-offset-1 col-sm-offset-2  col-xs-offset-2">重&nbsp;&nbsp;置</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
{# 添加js脚本 #}
{% block scripts %}
    {{ super() }}
    <script>
        $('#inputPhone').blur(function () {
            let phone = $(this).val();
            let span_ele = $(this).next('span');
            if (phone.length === 11) {
                span_ele.text('');
                $.get({
                    url: '{{ url_for('user.check_phone') }}',
                    data: {
                        phone: phone
                    },
                    success: function (data) {
                        //console.log(data);
                        if (data !== 200) {
                            span_ele.css({
                                color: '#ff0001',
                                fontsize: '12px'
                            });
                            span_ele.text(data.msg);
                        }
                    },
                    error: function () {
                        console.log('ajax出错了!');
                    }
                });
            } else {
                span_ele.css({
                    color: '#ff0001',
                    fontsize: '12px'
                });
                span_ele.text('手机号码格式错误！');
            }
        });
    </script>
{% endblock %}
